import { Component, OnInit } from '@angular/core'
import { Router } from '@angular/router'
import { CommonUtil } from 'src/app/common/utils/common.util'
import { DiscoverService } from '../services/discover.service'

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.scss']
})
export class IndexComponent implements OnInit {
  // 列表
  list = []
  nomore = false
  error = false
  loading = false
  // 图片浏览组件
  imgview = {
    show: false,
    list: [],
    index: 0
  }
  // 轮播图
  sliderConfig = {
    effect: 'slide',
    autoHeight: true,
    loop: true
  }

  constructor(private router: Router, private utils: CommonUtil, private service: DiscoverService) {
    // 触底翻页
    window.onscroll = e => {
      let clientHeight = document.documentElement.clientHeight
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      let scrollHeight = document.body.scrollHeight
      // 触底了
      if (scrollTop + clientHeight === scrollHeight) {
        setTimeout(() => {
          if (!this.nomore && !this.error) {
            this.getList(this.service.reqdata.pager.Start)
          }
        }, 1000)
      }
    }
  }

  // 初始化
  ngOnInit() {
    this.loading = true
    this.getList(0)
  }
  // 获取列表
  getList(start) {
    this.service.getList(
      start,
      res => {
        setTimeout(() => {
          this.error = false
          this.loading = false
        }, 500)
        if (res.Success && res.Result) {
          // 下一次的起始条目需要加上本次请求到的数据条数
          this.service.reqdata.pager.Start += res.Result.Value.length
          // 如果本次请求到的数据小于每页总数，说明没有下一页了
          if (res.Result.Value.length < this.service.reqdata.pager.Limit) {
            this.nomore = true
          } else {
            this.nomore = false
          }
          // 数据处理
          let data = res.Result.Value.map(item => {
            let Avatar = this.utils.getThumbnail(item.Photo)
            let Imgs = this.utils.getPhotoByName(item.Photo, '发现')
            let obj = {
              Id: item.Id,
              Avatar: Avatar,
              Topic: item.Topic,
              Description: item.Description,
              Imgs: Imgs,
              UpdateTime: item.UpdateTime,
              Url: item.Uri
            }
            return obj
          })
          // 如果是第一页，那先把数据清空
          if (start === 0) {
            this.list = []
          }
          this.list = this.list.concat(data)
        } else {
          this.nomore = false
        }
      },
      err => {
        setTimeout(() => {
          this.error = true
          this.loading = false
        }, 500)
      }
    )
  }
  // 列表性能优化
  trackByFn(index, item) {
    return item.Id
  }
  // 打开图片浏览组件
  showImgView(imgs, index, title?, desc?) {
    let list = imgs.map(item => {
      let obj: any = {}
      obj.Photo = item
      obj.Title = title || ''
      obj.Desc = desc || ''
      return obj
    })
    this.imgview = {
      show: true,
      list: list,
      index: index || 0
    }
  }
  // 轮播图跳转
  navigateTo(url) {
    let result = this.utils.getNivigateLink(url)
    if (!result) {
      return false
    } else {
      this.router.navigateByUrl(result)
    }
  }
  // 刷新
  handleReload() {
    this.error = false
    this.loading = true
    this.getList(this.service.reqdata.pager.Start)
  }
}
